<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('确认服务预约订单')" />
    <th:block th:include="include :: select2-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-serverOrder-edit" th:object="${webServerOrder}">
            <input name="recycleTypeId" id="recycleTypeId" type="hidden" th:field="*{recycleTypeId}"/>
            <input name="orderId" th:value="${webServerOrder.id}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">用户：</label>
                <div class="col-sm-8 form-control-static" th:text="*{name}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预约项目：</label>
                <div class="col-sm-8" th:if="${webServerOrder.status == 1}">
                    <div class="input-group">
                        <input name="recycleType" th:attr="data-id=*{recycleTypeId}" th:field="*{recycleType}" class="form-control" type="text" required>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown">
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-sm-8 form-control-static" th:if="${webServerOrder.status == 2}" th:text="*{recycleType}">

                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label">状态：</label>
                <div class="col-sm-8" th:if="${webServerOrder.status == 1}">
                    <div class="radio-box" th:each="dict : ${@dict.getType('server_order_status')}" >
                        <input type="radio" th:id="${'status_' + dict.dictCode}" name="status" th:value="${dict.dictValue}" disabled th:field="*{status}">
                        <label th:for="${'status_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                    </div>
                </div>
                <div class="col-sm-8 form-control-static" th:if="${webServerOrder.status == 2}" th:text="${@dict.getLabel('server_order_status',webServerOrder.status)}">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">门店：</label>
                <div class="col-sm-8 form-control-static" th:text="*{deptName}" >
                </div>
            </div>
            <div class="form-group">    
                <label class="col-sm-3 control-label is-required">预约日期：</label>
                <div class="col-sm-8 form-control-static" th:text="*{preDay}">
                </div>

            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">预约时间：</label>
                <div class="col-sm-8 form-control-static" th:text="*{preTime}">
                </div>
            </div>
            <!--<div class="form-group">
                <label class="col-sm-3 control-label">服务技师：</label>
                <div class="col-sm-8">
                    <select name="serverUserId" class="form-control m-b" th:with="type=${listServerUser}" required>
                        <option th:each="dict : ${type}" th:text="${dict.realname}" th:value="${dict.id}" th:field="*{serverUserId}"></option>
                    </select>
                </div>
            </div>-->
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">服务流程：</label>
                <div class="col-sm-8" th:if="${webServerOrder.status == 1}" id="flows">
                    <div class="row flowRow" th:each="item,index:${webRecycleTypeList}" style="margin-top: 6px;">
                        <div class="col-md-2">
                            <input type="text" lp="flowName" th:attr="name='webServerOrderFlow['+${index.index}+'].flowName'" readonly placeholder="流程" class="form-control" th:value="${item.name}">
                            <input type="hidden" lp="flowId" th:attr="name='webServerOrderFlow['+${index.index}+'].flowId'" th:value="${item.id}">
                        </div>
                        <div class="col-md-3">
                            <select lp="serverUserId"  th:attr="name='webServerOrderFlow['+${index.index}+'].serverUserId'" class="form-control m-b" th:with="type=${listServerUser}" required>
                                <option th:each="dict : ${type}" th:text="${dict.realname}" th:value="${dict.id}" th:field="*{serverUserId}"></option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select lp="time"  th:attr="name='webServerOrderFlow['+${index.index}+'].time'" class="form-control m-b" required>
                                <!--<option value=""></option>-->
                                <option th:each="dict,index : ${listServerTime}" th:text="${dict}" th:value="${dict}" th:field="*{preTime}"></option>
                            </select>
                        </div>
                        <i class="fa fa-times-circle deleteFlow"></i>
                    </div>

                    <div class="row flowRow hidden" style="margin-top: 6px;">
                        <div class="col-md-2">
                            <select lp="flowId" class="form-control m-b" th:with="type=${webRecycleTypeList2}" required>
                                <option value=""></option>
                                <option th:each="dict : ${type}" th:text="${dict.name}" th:value="${dict.id}"></option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select lp="serverUserId" class="form-control m-b" th:with="type=${listServerUser}" required>
                                <option value=""></option>
                                <option th:each="dict : ${type}" th:text="${dict.realname}" th:value="${dict.id}" ></option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <select lp="time" class="form-control m-b" required>
                                <option value=""></option>
                                <option th:each="dict,index : ${listServerTime}" th:text="${dict}" th:value="${dict}"></option>
                            </select>
                        </div>
                        <i class="fa fa-plus addFlow hidden"></i>
                    </div>
                </div>
                <div class="hidden" id="hiddenEle">
                    <select id="listServerUserSelect" class="form-control m-b" th:with="type=${listServerUser}" required>
                        <option th:each="dict : ${type}" th:text="${dict.realname}" th:value="${dict.id}" th:field="*{serverUserId}"></option>
                    </select>
                    <select id="listTimeSelect" class="form-control m-b" required>
                        <!--<option value=""></option>-->
                        <option th:each="dict,index : ${listServerTime}" th:text="${dict}" th:value="${dict}" th:field="*{preTime}"></option>
                    </select>
                </div>
                <div class="col-sm-8" th:if="${webServerOrder.status == 2}">
                    <div class="row" th:each="item,index:${listFlows}" style="margin-top: 6px;" th:object="${item}">
                        <div class="col-md-2" th:text="${item.flowName}">
                        </div>
                        <div class="col-md-3" th:text="${item.serverUserName}">
                        </div>
                        <div class="col-md-3" th:text="${item.time}">
                        </div>
                    </div>
                </div>

            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label">备注：</label>
                <div class="col-sm-8">
                    <input name="comment" th:field="*{comment}"  class="form-control" type="text" maxlength="50">
                </div>
            </div>
        </form>
    </div>
    <div class="row">
        <div class="col-sm-offset-5 col-sm-10">
            <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()" th:if="${webServerOrder.status!=2}"><i class="fa fa-check"></i>保 存</button>&nbsp;
            <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i class="fa fa-reply-all"></i>关 闭 </button>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <th:block th:include="include :: select2-js" />

    <script th:inline="javascript">
        var prefix = ctx + "system/serverOrder";
        $("#form-serverOrder-edit").validate({
            focusCleanup: true
        });

        $(function (){
            $(".deleteFlow").on("click",function(){
                var obj = $(this);
                obj.parent(".row").remove();
                $(".flowRow").each(function (index){
                    obj = $(this);
                    obj.find(".col-md-2 input[lp='flowName']").attr("name","webServerOrderFlow["+index+"].flowName");
                    obj.find(".col-md-2 input[lp='flowId']").attr("name","webServerOrderFlow["+index+"].flowId");
                    obj.find(".col-md-3 select[lp='serverUserId']").attr("name","webServerOrderFlow["+index+"].serverUserId");
                    obj.find(".col-md-3 select[lp='time']").attr("name","webServerOrderFlow["+index+"].time");
                })

            })

            $("#flows").on("click",".addFlow",function (){
                var obj = $(this);
                var outerHTML = obj.parent().prop("outerHTML");
                obj.parent().after(outerHTML);
            })
        })

        function submitHandler() {
            if ($.validate.form()) {
                var userId = $("#name").attr("data-id");
                $("#userId").val(userId);

                var recycleTypeId = $("#recycleType").attr("data-id");
                $("#recycleTypeId").val(recycleTypeId);
                var data = $('#form-serverOrder-edit').serialize();
                $.operate.saveTab(prefix + "/confirmSave", data);
            }
        }

        var listRecycleType = [[${listRecycleType}]];
        if(typeof listRecycleType =="string"){
            listRecycleType = eval(listRecycleType);
        }

        var values=[];
        for(var index in listRecycleType){
            var val = {};
            val.id = listRecycleType[index].id;
            val.name = listRecycleType[index].name;
            values.push(val);
        }
        //data 数据中获取
        $("#recycleType").bsSuggest("init",{
            idField: "id",
            keyField: "name",
            clearable: true,
            effectiveFields:["name"],
            effectiveFieldsAlias:{name: "姓名"},
            data: {
                'value': values
            }
        }).on('onSetSelectValue', function (e, keyword) {
	        //console.log('onSetSelectValue: ', keyword.id);
            var url = ctx + "system/recycleType/getJsonServerFlow/" + keyword.id;
            $.modal.loading("正在加载数据，请稍后...");
            $.get(url, function(result) {
                if (result.code == web_status.SUCCESS) {
                    var flows = $("#flows");
                    flows.empty();
                    var listServerUserSelect = $("#listServerUserSelect").html();
                    var listTimeSelect = $("#listTimeSelect").html();
                    $.each(result.data, function(index, value) {
                        flows.append('<div class=row style=margin-top:6px><div class=col-md-2><input name=webServerOrderFlow['+index+'].flowName readonly class=form-control value="'+value.name+'"> <input type=hidden name=webServerOrderFlow['+index+'].flowId value='+value.id+'></div><div class=col-md-3><select name=webServerOrderFlow['+index+'].serverUserId class="form-control m-b" required>'+listServerUserSelect+'</select></div><div class=col-md-3><select name=webServerOrderFlow['+index+'].time class="form-control m-b" required>'+listTimeSelect+'</select></div></div>');
                    });
                } else {
                    $.modal.alertError(result.msg);
                }
                $.modal.closeLoading();
            });
	    });

    </script>
</body>
</html>